<template lang="pug">
  .step-6
    Spin(v-if="spinShow" size="large" fix)
    Form(:label-width="150" )
      Row(type="flex" justify="start")
        Col(span="24")
          .font-weight.mb-15 薪资发放
          Table.hasTitle-table.beautiful-table(:columns="createPayDaysThead" :data="payDaysTableData" :stripe="true" style="width:100%")
            ._table_header(slot="header")
              //- ._button.pull-right.mr-20
              //-   i-button(type="info" @click="addpayDaysFn") 修改
        //- Col(span="1")
        //-   .vertical-line
        //- Col(span="14")
        //-   .font-weight.mb-15
        //-     | 附件
        //-     Upload.ml-20.display-inline-block(:show-upload-list="false" multiple :before-upload="licenseUpload" :action="uploadBaseUrl+'/Customer/'+customerId+'/Upload'" :on-success="attachmentsSuccess" :data="{categoryname: '附件'}")
        //-       Button(type="info" icon="ios-cloud-upload-outline") 点击上传
        //-   Row(v-if="attachmentsFileList" type="flex" justify="start" :gutter="16")
        //-     template(v-for="item in attachmentsFileList")
        //-       .my-tag.mr-20.mb-15
        //-         .my-tag-inner(@click="downFiel(item.id,item.name)") {{item.name}}
        //-         .img-close.ivu-icon.ivu-icon-ios-close(@click="deleteImg(item.id)")
        //-   Row(v-else type="flex" justify="start" :gutter="16")
        //-     .font-24 暂未有附件上传

    Modal(v-model="addpayDaysModal" title="添加薪资发放日期" @on-ok="saveStep_payDays")
      Form(:label-width="130" )
        FormItem(label="薪资发放时间：")
          Select.input-has-border(v-model="PayDaysValue" multiple  placeholder="请选择" style="width:100%" clearable)
            Option(v-for="(item, index) in PayDays" :value="item.value" :key="index") {{ item.label }}

</template>

<script>
import dataApi from '@/api/data.js'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

export default {
  name: 'step_6',
  props: {
    customerId: String
  },
  data () {
    return {
      spinShow: false,
      addpayDaysModal: false, // 添加薪资发放弹窗
      PayDays: [{ value: '1', label: '1号' }, { value: '2', label: '2号' }, { value: '3', label: '3号' }, { value: '4', label: '4号' }, { value: '5', label: '5号' }, { value: '6', label: '6号' }, { value: '7', label: '7号' }, { value: '8', label: '8号' }, { value: '9', label: '9号' }, { value: '10', label: '10号' }, { value: '11', label: '11号' }, { value: '12', label: '12号' }, { value: '13', label: '13号' }, { value: '14', label: '14号' }, { value: '15', label: '15号' }, { value: '16', label: '16号' }, { value: '17', label: '17号' }, { value: '18', label: '18号' }, { value: '19', label: '19号' }, { value: '20', label: '20号' }, { value: '21', label: '21号' }, { value: '22', label: '22号' }, { value: '23', label: '23号' }, { value: '24', label: '24号' }, { value: '25', label: '25号' }, { value: '26', label: '26号' }, { value: '27', label: '27号' }, { value: '28', label: '28号' }, { value: '29', label: '29号' }, { value: '30', label: '30号' }, { value: '31', label: '31号' }],
      PayDaysValue: [], // 薪资发放日期
      createPayDaysThead: [ // 薪资发放表头
        {
          title: '发放次数',
          minWidth: 150,
          tooltip: true,
          key: 'time'
        },
        {
          title: '发放时间',
          minWidth: 150,
          tooltip: true,
          key: 'day'
        }
      ],
      payDaysTableData: [], // 薪资发放表格数据
      // 附件
      attachmentsFileModal: false, // 附件上传
      attachmentsFileList: [],
      licenseFile: null, // 营业执照副本
      procedureFile: null, // 客户流程
      cqcncFile: null, // 员工手册模板
      contractTemplateFile: null, // 劳动合同模板
      rulesFile: null, // 规章制度
      examineFile: null, // 离职满意度调查模板
      agreementFile: null, // 客户协议模板
      uploadBaseUrl: baseUrl
    }
  },
  created () {
    this.getPayDaysList()
    this.getAttachments()
  },
  computed: {
    has () {}
  },
  methods: {
    deleteImg (id) {
      dataApi.deleteAttachments({
        id: id
      }).then(res => {
        this.getAttachments()
      })
    },
    // 获取薪资发放日期信息
    getPayDaysList () {
      this.spinShow = true
      dataApi.getPayDaysList({
        id: this.customerId
      }).then(res => {
        // console.log(res.data.data)
        this.spinShow = false
        if (res.data.success) {
          this.payDaysTableData = []
          let arr = res.data.data.split(',')
          this.PayDaysValue = arr
          // console.log(this.PayDaysValue)
          arr.forEach((item, index) => {
            this.payDaysTableData.unshift({
              time: '第' + (index + 1) + '次',
              day: item + '号'
            })
          })
        }
      })
    },
    // 获取附件列表
    getAttachments () {
      this.spinShow = true
      dataApi.getAttachments({
        id: this.customerId
      }).then(res => {
        this.attachmentsFileList = res.data.data
        this.spinShow = false
      })
    },
    // 下载附件
    downFiel (id, fileName) {
      console.log(id, fileName)
      const suffixs = ['JPG', 'JPEG', 'PNG']
      let suffix = fileName.substring(fileName.lastIndexOf('.') + 1).toUpperCase()
      console.log(suffix)
      if (suffixs.includes(suffix)) {
        this.$emit('preview', {
          url: this.uploadBaseUrl + '/Customer/DownLoadAttachment?id=' + id,
          id: id,
          fileName: fileName
        })
      } else {
        dataApi.getDownLoadAttachment({
          id: id
        }).then(res => {
          console.log(res)
          let blob = new Blob([res.data], { type: 'application/octet-stream' })
          if ('download' in document.createElement('a')) {
            let objectUrl = URL.createObjectURL(blob)
            console.log(objectUrl)
            // let objectUrl = URL.createObjectURL(new Blob([res.data],{type: 'application/octet-stream'}))
            // 文件地址
            const link = document.createElement('a')
            link.download = fileName
            link.href = objectUrl
            link.click()
          } else {
            navigator.msSaveBlob(blob, fileName)
          }
        })
      }
    },
    // 打开添加弹窗
    addpayDaysFn () {
      this.addpayDaysModal = true
      // console.log(this.PayDaysValue)
    },
    // 保存
    saveStep_payDays () {
      dataApi.getPayDays({
        CustomerId: this.customerId,
        PayDays: this.PayDaysValue.join(',')
      }).then((res) => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.message)
          this.getPayDaysList()
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 上传成功
    uploadSuccess () {
      this.$Message.success('成功！')
      this.getAttachments()
    },
    // 打开上传附件模态窗
    showAttachmentsFileModal () {
      this.attachmentsFileModal = true
    },
    // 营业执照上传
    licenseUpload (file) {
      this.licenseFile = file
      // console.log(this.licenseFile)
    },
    attachmentsSuccess () {
      this.getAttachments()
    },
    // 客户流程上传
    procedureUpload (file) { this.procedureFile = file },
    // 员工手册上传
    cqcncUpload (file) { this.cqcncFile = file },
    // 劳动合同上传
    contractTemplateUpload (file) { this.contractTemplateFile = file },
    // 规章制度上传
    rulesUpload (file) { this.rulesFile = file },
    // 满意度调查上传
    examineUpload (file) { this.examineFile = file },
    // 客户协议上传
    agreementUpload (file) { this.agreementFile = file },
    // 修改按钮
    reviseBtn () {
      this.isCheck = false
    }
  }
}
</script>

<style lang="less" scoped>
  .up-item{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .up-label{
      min-width: 130px;
    }
    .up-value{
      margin-right: 15px;
    }
  }
  .und-line{
    text-decoration: underline;
    cursor: pointer;
    &:hover{
      color: #2d8cf0;
    }
  }
  .my-tag {
    display: inline-block;
    padding: 5px 30px 5px 10px;
    border-radius: 4px;
    position: relative;
    border: 1px solid #dcdee2;
    overflow: hidden;
    &:hover{
      color: @main_color;
      cursor: pointer;
      // border-color: @main_color;
    }
    &:after{
      content: '';
      width: 1px;
      height:100%;
      background-color: #dcdee2;
      position: absolute;
      top: 0;
      right: 20px;
    }
    .img-close{
      display: inline-block;
      width: 20px;
      height: 100%;
      position: absolute;
      line-height: 30px;
      top: 0;
      right: 0;
      font-size: 20px;
      &:hover{
        background-color: @main_color;
        color: #fff;
        // cursor: pointer;
      }
    }
  }
</style>
